<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="General-style.css">
	<script src="jquery.min.js"></script>
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<title>陕西服装工程学院-电脑维修预约</title>
</head>
<body>
	<div class="wrap">
		<div class="top">
			<div class="top_one">
				<div class="content">
					<ul>
						<li><a href="Home-page.html">退出</a></li>
						<li><a id="signName" href="#">未登录</a></li>
					</ul>
					</ul>
				</div>
			</div>
			<div class="content top_two"><img src="images/logo.png"></div>
		</div>
		<div class="middle middle-admin">
			<p>陕西服装工程学院-校园电脑维修预约</p>
			<p id="admin">管理员界面</p>
			<div class="content">
				<div class="query">
					查询进度：<input class="q" type="text"><button>查询</button>(未处理、处理中、已处理、用户)<br>切记：修改进度时只能修改为未处理、处理中、已处理！(若改错了，查询用户进行更改！)<br>(点击进度内容进行修改，改好后在空白处点击修改成功)
				</div>
				<table class="table table-hover">
 					<thead>
 						<tr id="tr">
 							<th>账号</th>
 							<th>电话</th>
 							<th>故障</th>
 							<th>地址</th>
 							<th>账户类型</th>
 							<th>进度</th>
 						</tr>
 					</thead>
 					<tbody>
 						<tr id="tem">
 							<td></td>
 							<td></td>
 							<td></td>
 							<td></td>
 							<td></td>
 							<td class="process"></td>
 						</tr>
 					</tbody>
				</table>
			</div>
		</div>
		<div class="foot">
			<div class="content clear">
				<ul>
					<li><img src="images/weixin.jpg"><p>学院官方微信</p></li>
					<li><img src="images/sina.jpg"><p>招就办官方微信</p></li>
				</ul>
				<ol>
					<li><p>陕西服装工程学院</p></li>
					<li>校址：西安市西咸新区沣西新城崇文路1号</li>
					<li>招生：029-38114101 38114102 </li>
					<li>传真：029-38114112</li>
					<li>邮编：712046</li>
				</ol>
			</div>
		</div>
	</div>
	<script>
		$.ajax({
			url:`http://127.0.0.1:81/query`,
			data:{
				process:"未处理",
			},
			success(data){
				var data = JSON.parse(data);
				$(".c").remove();
				data.forEach(function(item){
					$("#tem").clone(true).appendTo($("tbody")).addClass("o")[0].id = "";
					$(".o td")[0].innerHTML = item.accountnumber;
					$(".o td")[1].innerHTML = item.telephone;
					$(".o td")[2].innerHTML = item.remarks;
					$(".o td")[3].innerHTML = item.address;
					$(".o td")[4].innerHTML = item.user;
					$(".o td")[5].innerHTML = item.process;
					$(".o").removeClass("o").addClass("c");
				})
			},
		})
		var lock = true;
		$.ajax({
			url:`http://127.0.0.1:81/sign-success`,
			success:function(data){
				$("#signName").html(JSON.parse(data));
				$("#signName")[0].style.backgroundColor = "#f1f1f1";
				$("#signName")[0].style.color = "#333";
			},
		})
		$(".query button").click(function(){
			$.ajax({
				url:`http://127.0.0.1:81/query`,
				data:{
					process:$(".query .q").val(),
					user:"用户",
				},
				success(data){
					if(data !== "error" && ($(".query .q").val() === "未处理" || $(".query .q").val() === "已处理" || $(".query .q").val() === "处理中" || $(".query .q").val() === "用户")){
						var data = JSON.parse(data);
						$(".c").remove();
						data.forEach(function(item){
							$("#tem").clone(true).appendTo($("tbody")).addClass("o")[0].id = "";
							$(".o td")[0].innerHTML = item.accountnumber;
							$(".o td")[1].innerHTML = item.telephone;
							$(".o td")[2].innerHTML = item.remarks;
							$(".o td")[3].innerHTML = item.address;
							$(".o td")[4].innerHTML = item.user;
							$(".o td")[5].innerHTML = item.process;
							$(".o").removeClass("o").addClass("c");
						})
					}
					else{
						alert("查询内容不存在");
					}
				},
			})
		})
		$(".process").click(function(){
			if(lock){
				var _this = this;
				var old = $(this).text();
				$(this).html("");
				$(this).append($("<input>"));
				$('.process input').focus().val(old);
	  			lock = false;
	  			var oldtr = $(this).closest("tr")[0];
	  			var acc = $(oldtr).find("td")[0].innerHTML;
				$('.process input').blur(function(){
					old = $(this).val();
					$(_this).html(old);
					lock = true;
					$.ajax({
						url:`http://127.0.0.1:81/queries`,
						data:{
							accountnumber:`${acc}`,
							process:`${old}`,
						},
						success(data){
							if(data === "修改进度成功！"){
								alert("修改进度成功！");
							}
							else{
								alert("修改进度失败！");
							}
						}
					})
				})
  			}
		})
	</script>
</body>
</html>